<template>
  <el-dropdown style="width: 140px;height: 75px">
        <span style="outline: none" class="el-dropdown-link">
          <el-avatar :size="50" class="avatar" :src="AvatarLogo"/>
          {{store.admin_username}}
          <el-icon class="header-icon el-icon--right">
            <arrow-down/>
          </el-icon>
        </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :command="2" divided @click="modifyPassword">
          <el-icon>
            <Edit/>
          </el-icon>
          修改密码
        </el-dropdown-item>
        <el-dropdown-item :command="3" divided @click="logOut">
          <el-icon>
            <SwitchButton/>
          </el-icon>
          退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
  <PersonalDialog
      ref="person"
      @submit="handleSubmit"
  />
</template>

<script setup>
import {ref, reactive} from 'vue'
import useAdminrouter from "@/router/index.js";
import {useAdminStore} from '@/stores/modules/user/index.js'
import {ElMessage, ElMessageBox} from "element-plus";
import PersonalDialog from './PersonalDialog.vue'
import AvatarLogo from '@/assets/images/avatar.png'
import {
  EditAdminMessageService
} from '@/api/adminmessage.js'

const router = useAdminrouter
const store = useAdminStore()
// 对话框绑定
const person = ref()
// 展示对话框
const modifyPassword = () => {
  person.value.show()
}

//表单提交
const handleSubmit = async (value) =>{
  console.log(value)
  const adminId = localStorage.getItem('admin_id')
  await EditAdminMessageService(value,adminId)
  .then((res)=>{
    ElMessage.warning('密码修改成功，即将退出到登陆界面')
    setTimeout(()=>{
      store.Logout()
      router.push({path:'/login'})
    },2000)
  })
  .catch((error)=>{
    console.log(error)
  })
}

// 退出登录
const logOut = async () => {
  ElMessageBox.confirm('您是否确认退出登录?', '温馨提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
      .then(async () => {
        await store.Logout()
        await router.push({path: '/login'})
        ElMessage({
          type: "success",
          message: "退出登录成功！"
        });
      })
      .catch(() => {
      })
}
</script>

<style scoped>
.avatar {
  margin-right: 6px;
}

.el-dropdown-link {
  cursor: pointer;
  display: flex;
  color: var(--el-color-primary);
  align-items: center;
}
</style>